import { ScrollView, View, Text, Image } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import moment from 'dayjs';
import Blank from '@/pages/common/blank';
import notdataImg from '@/assets/image/none/none.png';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      refresherTriggered: false,
      userInfos: Taro.getStorageSync('b2b-wechat@login').user || {},
    };
  }

  componentDidMount() { }

  componentDidShow() {
    this.props.actions.init();
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  _onScrollToLower = () => {
    let { userInfos } = this.state;
    let {
      main: { pageNum, totalPages },
      actions: { action },
    } = this.props;
    let num = pageNum + 1;
    if (pageNum == totalPages) return;
    let params = {
      userId: userInfos.id,
      pageNum: num,
    };
    this.props.actions.action.commonChange('main.pageNum', num);
    this.props.actions.action.getSuggesFeedList(params);
  };
  _onRefresherRefresh = () => {
    let { refresherTriggered, userInfos } = this.state;
    if (refresherTriggered) return;
    this.setState({
      refresherTriggered: true,
    });
    let params = {
      userId: userInfos.id,
      pageNum: 1,
    };
    this.props.actions.action.commonChange('main.pageNum', 1);
    this.props.actions.action.getSuggesFeedList(params);
    setTimeout(() => {
      this.setState({
        refresherTriggered: false,
      });
    }, 2000);
  };

  returnImgss(imglist) {
    if (imglist.length > 0) {
      let listView = [];
      const urls = [];
      imglist.map((item, index) => {
        urls.push(item.imageUrl);
        listView.push(
          <View
            key={index}
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              paddingTop: '30rpx',
              paddingBottom: '30rpx',
            }}
          >
            <Image
              style={{
                width: '140rpx',
                height: '140rpx',
                marginRight: '20rpx',
                borderRadius: '5rpx',
                overflow: 'hidden',
              }}
              src={item.imageUrl}
              mode="aspectFit"
              key={item.imageUrl}
              onClick={this.onImageClick.bind(this, item, urls)}
            />
          </View>,
        );
      });
      return listView;
    } else {
      return null;
    }
  }

  onImageClick = (item, urls) => {
    this.previewImage(item.imageUrl, urls);
  };

  previewImage = (img, files) => {
    Taro.previewImage({
      current: img, // 当前显示图片的http链接
      urls: files, // 需要预览的图片http链接列表
    });
  };

  renderList(feedbackList) {
    let listView = [];
    feedbackList.map((item, index) => {
      listView.push(
        <View className="mainItem">
          <View
            style={[
              index == 0
                ? {
                  borderTopColor: '#f7f7f7',
                  borderTopWidth: '16rpx',
                  width: '100%',
                  marginBottom: '12rpx',
                  borderBottomColor: '#f7f7f7',
                  borderBottomWidth: '16rpx',
                }
                : {
                  width: '100%',
                  marginBottom: '12rpx',
                  borderBottomColor: '#f7f7f7',
                  borderBottomWidth: '16rpx',
                },
            ]}
          >
            <View>
              <View className="bord1">
                <View className="item_boxs">
                  <Text className="item_title">详情描述</Text>
                  <Text className="item_contet1">{item.content}</Text>
                </View>
              </View>
              <View className="bord">
                <View className="item_box">
                  <Text className="item_title">联系方式</Text>
                  <Text className="item_contet">{item.phone}</Text>
                </View>
              </View>
              <View className="bord">
                <View className="item_box">
                  <Text className="item_title">反馈时间</Text>
                  <Text className="item_contet">{moment(item.createDate).format('YYYY-MM-DD HH:mm:ss')}</Text>
                </View>
              </View>
              <View className="bord">
                <View className="item_box">
                  <Text className="item_title">状态</Text>
                  {item.status == 0 ? (
                    <Text className="item_contet">未读</Text>
                  ) : (
                    <Text className="item_contet2">已读</Text>
                  )}
                </View>
              </View>
              {item.refImage == null || item.refImage == [] || item.refImage == '' ? (
                <View className="bord">
                  <View className="item_box1">
                    <Text className="item_title">图片</Text>
                    <Text className="item_contet">暂无图片</Text>
                  </View>
                </View>
              ) : (
                <View className="item_box2">
                  <Text className="item_title1">图片</Text>
                  <View
                    style={{
                      width: '90%',
                      height: '200rpx',
                      flexDirection: 'row',
                    }}
                  >
                    {this.returnImgss(item.refImage)}
                  </View>
                </View>
              )}
            </View>
          </View>
        </View>,
      );
    });
    return listView;
  }

  async addClick() {
    let itemStr = Taro.getStorageSync('b2b-wechat@login')
    if (!itemStr) {
      Taro.navigateTo({
        url: '/pages/package-C/login/login/index',
      });
      return
    }
    Taro.navigateTo({
      url: '/pages/package-C/setting/feedback/add/index',
    });
  }

  render() {
    let { refresherTriggered } = this.state;
    let {
      main: { suggesFeedbackList, pageNum, totalPages, isLoading },
      actions: { action },
    } = this.props;
    return (
      <View className="feedBackMain">
        <ScrollView
          className="feedbackScroll"
          style={{ flex: 1, paddingBottom: '150rpx' }}
          onScrollToLower={this._onScrollToLower}
          refresherEnabled
          refresherTriggered={refresherTriggered}
          onRefresherPulling={this._onRefresherRefresh}
          scrollY
        >
          <View>
            {suggesFeedbackList.length > 0 ? (
              this.renderList(suggesFeedbackList)
            ) : (
              <Blank
                content="您还没有信息哦~"
                img={notdataImg}
                imgStyle={{ width: '400rpx', height: '400rpx' }}
                textStyle={{
                  fontSize: '32rpx',
                  color: '#999999',
                  textAlign: 'center',
                  marginTop: '40rpx',
                }}
              />
            )}
            {suggesFeedbackList.length != 0 && pageNum != totalPages && <View className="status">加载中</View>}
            {!isLoading && suggesFeedbackList.length != 0 && pageNum == totalPages && (
              <View className="status">已经到底了~</View>
            )}
          </View>
        </ScrollView>
        <View className="bottom">
          <View className="btn_box">
            <Text
              className="btn-release"
              onClick={() => {
                this.addClick()
              }}
            >
              新增建议反馈
            </Text>
          </View>
        </View>
      </View>
    );
  }
}
